<template>
	<div :class="{'hidden':hidden}" class="pagination-container">
		<el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pagesize" :layout="layout"
			:page-sizes="pageSizes" :total="total" v-bind="$attrs" @size-change="handleSizeChange"
			@current-change="handleCurrentChange" />
	</div>
</template>

<script>

export default {
	name: 'Pagination',
	props: {
		total: {
			required: true,
			type: Number,
		},
		page: { // 当前页
			type: Number,
			default: 1,
		},
		limit: {
			type: Number,
			default: 2,
		},
		pageSizes: { // 页数选择
			type: Array,
			default () {
				return [ 5, 10, 20, 50 ]
			},
		},
		layout: {
			type: String,
			default: 'total, sizes, prev, pager, next, jumper',
		},
		background: {
			type: Boolean,
			default: true,
		},
		hidden: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		currentPage: {
			get () {
				return this.page
			},
			set ( val ) {
				this.$emit( 'update:page', val )
			},
		},
		pagesize: {
			get () {
				return this.limit
			},
			set ( val ) {
				this.$emit( 'update:limit', val )
			},
		},
	},
	methods: {
		handleSizeChange ( val ) {
			this.$emit( 'pagination', {
				page: this.currentPage,
				limit: val,
			} )
		},
		handleCurrentChange ( val ) {
			this.$emit( 'pagination', {
				page: val,
				limit: this.pagesize,
			} )
		},
	},
}
</script>

<style scoped>
.pagination-container {
	text-align: right;
	background: #fff;
	padding: 10px 16px;
}
.pagination-container.hidden {
	display: none;
}
</style>
